<template>
  <!-- View -->
  <div id="ibody">
    <!-- banner and mainIcons -->
    <div class="bannerbox">
      <div class="vbanner">
        <swiper></swiper>
      </div>
      <ul class="iconlist">
        <li v-for="(item, index) in iconList" :key="index">
          <img :src="item.imgsrc" alt="" />
          <span>{{ item.title }}</span>
        </li>
      </ul>
    </div>
    <!-- 限时秒杀、品牌上新、日用好物 -->
    <div class="limitbox">
      <div class="leftbox">
        <div class="upper">
          <p class="title">{{ secktitle }}</p>
          <p class="more">查看更多<i class="bi bi-chevron-right"></i></p>
          <p class="text">每天0点场，好货秒不停</p>
          <div class="clock">
            <van-count-down :time="time">
              <template #default="timeData">
                <span class="block">{{
                  timeData.hours + timeData.days * 24
                }}</span>
                <span class="colon">:</span>
                <span class="block">{{ timeData.minutes }}</span>
                <span class="colon">:</span>
                <span class="block">{{ timeData.seconds }}</span>
              </template>
            </van-count-down>
          </div>
        </div>
        <img src="../assets/img/pic/plate/index/kingkong/big.png" alt="" />
      </div>
      <div class="rightbox">
        <div class="innerbox">
          <img
            src="../assets/img/pic/plate/index/kingkong/small/small.png"
            alt=""
            class="bg"
          />
          <div class="upper top">
            <p class="title">品牌上新</p>
            <p class="text">9点整，抢大牌</p>
            <div class="goto absolute">
              <span>疯抢红包<i class="bi bi-chevron-right"></i></span>
            </div>
          </div>
        </div>
        <div class="innerbox">
          <img
            src="../assets/img/pic/plate/index/kingkong/small/02.png"
            alt=""
            class="bg"
          />
          <div class="upper bot">
            <p class="title">日用好物</p>
            <p class="text">愿君多采撷</p>
            <div class="goto absolute">
              <span>塞满奖券<i class="bi bi-chevron-right"></i></span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 商品列表 -->
    <div class="centerbox itembox">
      <div class="tab">
        <p class="active">双11尖货预购</p>
        <p class="">畅购全球</p>
      </div>
      <div class="rowlist">
        <ul>
          <li v-for="item in rowList" :key="item.id">
            <img :src="item.src" alt="" />
          </li>
        </ul>
      </div>
      <div class="collist">
        <div class="coltab">
          <div
            v-for="(item, index) in colTab"
            :key="item.id"
            :class="item.flag ? 'active' : ''"
            @click="coltab(index)"
          >
            {{ item.text }}
          </div>
        </div>
        <ul class="list">
          <li @click="toDetail(item.id)" v-for="item in colList" :key="item.id">
            <div class="box">
              <img :src="item.img" alt="" />
            </div>
            <div class="box">
              <p>{{ item.name }}</p>
              <p class="nprice">现价：￥{{ item.price }}</p>
              <p class="oprice">原价：￥{{ item.market_price }}</p>
              <button>立即抢购</button>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
import swiper from "../components/swiper.vue";
import { Hortgoods, GetSeckill } from "../util/request/api";
// JavaScript
export default {
  data() {
    return {
      time: 0,
      secktitle: "秒杀",
      iconList: [
        {
          title: "限时秒杀",
          imgsrc: require("../assets/img/icon/index/kingkong/seckill.png"),
        },
        {
          title: "畅销商品",
          imgsrc: require("../assets/img/icon/index/kingkong/top.png"),
        },
        {
          title: "品质大牌",
          imgsrc: require("../assets/img/icon/index/kingkong/brand.png"),
        },
        {
          title: "小U自营",
          imgsrc: require("../assets/img/icon/index/kingkong/selfsupport.png"),
        },
        {
          title: "积分商城",
          imgsrc: require("../assets/img/icon/index/kingkong/integral.png"),
        },
      ],
      rowList: [
        {
          id: 1,
          src: require("../assets/img/pic/commodity/01.png"),
        },
        {
          id: 2,
          src: require("../assets/img/pic/commodity/02.png"),
        },
        {
          id: 3,
          src: require("../assets/img/pic/commodity/03.png"),
        },
        {
          id: 4,
          src: require("../assets/img/pic/commodity/04.png"),
        },
        {
          id: 5,
          src: require("../assets/img/pic/commodity/05.png"),
        },
      ],
      colTab: [
        {
          id: 0,
          text: "热门推荐",
          flag: true,
        },
        {
          id: 1,
          text: "上新推荐",
          flag: false,
        },
        {
          id: 2,
          text: "所有商品",
          flag: false,
        },
      ],
      colList: [],
      colIdx: 0,
    };
  },
  components: {
    swiper,
  },
  mounted() {
    Hortgoods()
      .then((res) => {
        if (res.code != 200) {
          return;
        }
        this.colList = res.list[this.colIdx].content;
      })
      .catch((err) => {
        console.error(err);
      });
    GetSeckill().then((res) => {
      this.secktitle = res.list[0].title;
      this.time = res.list[0].endtime - res.list[0].begintime;
    });
  },
  methods: {
    toDetail(id) {
      this.$router.push({
        path: "/detail",
        query: {
          id,
        },
      });
    },
    coltab(i) {
      this.colTab.forEach((item) => {
        item.flag = false;
      });
      this.colTab[i].flag = true;
      this.colIdx = i;
      Hortgoods()
        .then((res) => {
          if (res.code != 200) {
            return;
          }
          this.colList = res.list[this.colIdx].content;
        })
        .catch((err) => {
          console.error(err);
        });
    },
  },
};
</script>
<style scoped>
@import url("../assets/css/index.css");
.list{
  margin-bottom: 50px
}
</style>